<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebGL Surface Plot Example</title>
    <script src="./lib/SurfacePlot.js"></script>
    <script src="./lib/ColourGradient.js"></script>
    <script src="./lib/glMatrix-0.9.5.min.js"></script>
    <script src="./lib/webgl-utils.js"></script>
    <script src="./lib/parser.js"></script>
    <script src="./lib/papaparse.js"></script>

    <style>
        #surfacePlotDiv {
            float: left;
            margin: 15px;
            width: 600px;
            height: 600px;
            border: 1px solid red;
            background: #fff;
        }
    </style>
</head>
<body>
<div id='surfacePlotDiv'></div>
<!-- 片元着色器 -->
<script id='shader-fs' type='x-shader/x-fragment'>
        #ifdef GL_ES
        precision highp float;
        #endif
        varying vec4 vColor;
        varying vec3 vLightWeighting;
        void main(void) {
            gl_FragColor = vec4(vColor.rgb * vLightWeighting, vColor.a);
        }


</script>
<!-- 顶点着色器 -->
<script id='shader-vs' type='x-shader/x-vertex'>
        attribute vec3 aVertexPosition;
        attribute vec3 aVertexNormal;
        attribute vec4 aVertexColor;
        uniform mat4 uMVMatrix;
        uniform mat4 uPMatrix;
        uniform mat3 uNMatrix;
        varying vec4 vColor;
        uniform vec3 uAmbientColor;
        uniform vec3 uLightingDirection;
        uniform vec3 uDirectionalColor;
        varying vec3 vLightWeighting;
        void main(void) {
            gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
            vec3 transformedNormal = uNMatrix * aVertexNormal;
            float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0);
            vLightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting;
            vColor = aVertexColor;
        }


</script>
<!-- 片元着色器 -->
<script id='axes-shader-fs' type='x-shader/x-fragment'>
        precision mediump float;
        varying vec4 vColor;
        void main(void) {
            gl_FragColor = vColor;
        }


</script>
<!-- 顶点着色器 -->
<script id='axes-shader-vs' type='x-shader/x-vertex'>
        attribute vec3 aVertexPosition;
        attribute vec4 aVertexColor;
        uniform mat4 uMVMatrix;
        uniform mat4 uPMatrix;
        varying vec4 vColor;
        uniform vec3 uAxesColour;
        void main(void) {
            gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
            vColor = vec4(uAxesColour, 1.0);
        }


</script>
<!-- 片元着色器 -->
<script id='texture-shader-fs' type='x-shader/x-fragment'>
        #ifdef GL_ES
        precision highp float;
        #endif
        varying vec2 vTextureCoord;
        uniform sampler2D uSampler;
        void main(void) {
            gl_FragColor = texture2D(uSampler, vTextureCoord);
        }


</script>
<!-- 顶点着色器 -->
<script id='texture-shader-vs' type='x-shader/x-vertex'>
        attribute vec3 aVertexPosition;
        attribute vec2 aTextureCoord;
        varying vec2 vTextureCoord;
        uniform mat4 uMVMatrix;
        uniform mat4 uPMatrix;
        void main(void) {
            gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
            vTextureCoord = aTextureCoord;
        }


</script>

<script>
    function computedStyleValue(id, property) {
        const element = document.getElementById(id);
        return (window.getComputedStyle(element, null).getPropertyValue(property));
    }

    const canvas_width = computedStyleValue('surfacePlotDiv', 'width');
    const canvas_height = computedStyleValue('surfacePlotDiv', 'height');

    let surfacePlot;
    let data, options, basicPlotOptions, glOptions, animated, plot, values;

    const numRows = 45;
    const numCols = 45;

    function setUp() {
        data = {
            nRows: numRows,
            nCols: numCols,
            formattedValues: values
        };

        surfacePlot = new SurfacePlot(document.getElementById('surfacePlotDiv'));

        let fillPly = true;

        const colour1 = {
            red: 0,
            green: 0,
            blue: 255
        };
        const colour2 = {
            red: 0,
            green: 255,
            blue: 255
        };
        const colour3 = {
            red: 0,
            green: 255,
            blue: 0
        };
        const colour4 = {
            red: 255,
            green: 255,
            blue: 0
        };
        const colour5 = {
            red: 255,
            green: 0,
            blue: 0
        };
        const colours = [colour1, colour2, colour3, colour4, colour5];

        const xAxisHeader = 'X-axis';
        const yAxisHeader = 'Y-axis';
        const zAxisHeader = 'Z-axis';

        let renderDataPoints = false;
        const background = '#ffffff';
        const axisForeColour = '#000000';
        const hideFloorPolygons = true;

        const chartOrigin = {
            x: 200,
            y: 265
        };

        // Options for the basic canvas plot.
        basicPlotOptions = {
            fillPolygons: fillPly,
            renderPoints: renderDataPoints
        };

        const xLabels = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
        const yLabels = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
        const zLabels = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

        glOptions = {
            xLabels: xLabels,
            yLabels: yLabels,
            zLabels: zLabels,
            chkControlId: 'allowWebGL',
            autoCalcZScale: false,
            animate: true
        };

        options = {
            xPos: 0,
            yPos: 0,
            width: canvas_width,
            height: canvas_height,
            colourGradient: colours,
            xTitle: xAxisHeader,
            yTitle: yAxisHeader,
            zTitle: zAxisHeader,
            backColour: background,
            axisTextColour: axisForeColour,
            hideFlatMinPolygons: hideFloorPolygons,
            origin: chartOrigin
        };
        let url = './data/testData1.csv';
        url = './data/testData2.csv';
        // url = './data/sin_saddle.csv';
        // url = './data/mt_bruno_elevation.csv';
        url = './data/x_y_model.csv';

        Papa.parse(url, {
            download: true,
            complete: results => {
                data.formattedValues = results.data.map(item => item.map(value => Number(value) * 0.0001));
                console.log(data.formattedValues);
                surfacePlot.draw(data, options, basicPlotOptions, glOptions);
            }
        });
    }

    setUp();

</script>
</body>
</html>